<template>
  <div class="string_operation">
    <div class="original">
      <div class="title">原始字符串: </div>
      <el-input v-model="value" clearable />
      <div class="title">操作参数: </div>
      <el-input v-model="operation" clearable />
    </div>
    <div class="operation">
      <el-button @click="toUpperCase">转大写</el-button>
      <el-button @click="toLowerCase">转小写</el-button>
      <el-button @click="split">split</el-button>
      <el-button @click="jsonFormat">json格式化</el-button>
    </div>
    <div class="result">
      <el-button class="copy_btn" size="mini" @click="copy">复制</el-button>
      <el-input type="textarea" v-model="resultString" :rows="15" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'StringOperation',
  data() {
    return {
      value: '',
      resultString: '',
      operation: ''
    }
  },
  methods: {
    toUpperCase() {
      this.resultString = this.value.toUpperCase()
    },
    toLowerCase() {
      this.resultString = this.value.toLowerCase()
    },
    split() {
      this.resultString = this.value.split(this.operation).join('\n')
    },
    copy() {
      const content = this.resultString
      if (window.clipboardData) {
        window.clipboardData.setData('text', content)
      } else {
        (function(content) {
          document.oncopy = function(e) {
            e.clipboardData.setData('text', content)
            e.preventDefault()
            document.oncopy = null
          }
        })(content)
        document.execCommand('Copy')
      }
    },
    jsonFormat() {
      try {
        this.resultString = JSON.stringify(JSON.parse(this.value), null, 2)
      } catch (error) {
        this.$message.error('json格式不正确')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.string_operation{
  height: 100%;
  background: #fff;
  padding: 20px;
  .original {
    display: flex;
    align-items: center;
    .title {
      width: fit-content;
      white-space: nowrap;
      margin-right: 10px;
      margin-left: 20px;
      &:first-child{
        margin-left: 0;
      }
    }
  }
  .operation {
    margin-top: 20px;
  }
  .result {
    margin-top: 20px;
    border-radius: 4px;
    position: relative;
    .text {
      padding: 10px 20px;
    }
    ::v-deep textarea{
      resize:none;
      /* 滚动条 */
      &::-webkit-scrollbar {
        width: 0; /*滚动条的宽度*/
        height: 8px; /*滚动条的高度*/
      }
      &:hover {
        &::-webkit-scrollbar {
          width: 10px;
        }
      }
      &::-webkit-scrollbar-track-piece {
        border-radius: 0;
        -webkit-border-radius: 0; /*滚动条的圆角宽度*/
      }
      &::-webkit-scrollbar-thumb:vertical {
        /*垂直滚动条的样式*/
        height: 50px;
        background-color: rgba(153, 153, 153, 0.5);
        border-radius: 4px;
        -webkit-border-radius: 4px;
        outline: 2px solid #fff;
        outline-offset: -2px;
        border: 2px solid #fff;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条的hover样式*/
        background-color: rgba(159, 159, 159, 0.3);
        border-radius: 4px;
        -webkit-border-radius: 4px;
      }
      &::-webkit-scrollbar-thumb:hover {
        /*滚动条的hover样式*/
        background-color: rgba(159, 159, 159, 0.5);
        border-radius: 4px;
        -webkit-border-radius: 4px;
      }
    }
    .copy_btn {
      display: none;
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
    }
    &:hover {
      .copy_btn {
        display: inline-block;
      }
    }
  }
}
</style>
